<template>
  <a-space style="width: 100%" direction="vertical">
    <a-card>
      <!-- 表单部分 -->
      <WayForm
        v-model:page="data.page"
        v-model:pageSize="data.pageSize"
        @init="getData"
        @finish="getData"
        @reset="getData"
      />
    </a-card>
    <!-- 按钮组 -->
    <a-card class="radio-card">
      <a-radio-group v-model:value="data.status" button-style="solid" size="large">
        <a-radio-button :value="undefined">
          全部
          {{
            Number(truckCount[1]) +
              Number(truckCount[2]) +
              Number(truckCount[3]) +
              Number(truckCount[4]) +
              Number(truckCount[6]) || 0
          }}
        </a-radio-button>
        <a-radio-button :value="1">新建 {{ truckCount[1] || 0 }}</a-radio-button>
        <a-radio-button :value="2">已装车 {{ truckCount[2] || 0 }}</a-radio-button>
        <a-radio-button :value="3">运输中 {{ truckCount[3] || 0 }}</a-radio-button>
        <a-radio-button :value="4">到达终端网点 {{ truckCount[4] || 0 }}</a-radio-button>
        <a-radio-button :value="6">拒收 {{ truckCount[6] || 0 }}</a-radio-button>
      </a-radio-group>
    </a-card>
    <a-card>
      <!-- 新增按钮 -->
      <a-button type="primary" @click="onOpenModal" style="margin-bottom: 20px">
        调度配置
      </a-button>
      <!-- 弹出层 新增配置-->
      <ModalForm v-model:open="isOpenModal" @ok="getData()" />
      <!-- 表格部分 -->
      <WayTable
        :dataSource="dataSource"
        :loading="isLoading"
        :total="total"
        v-model:page="data.page"
        v-model:pageSize="data.pageSize"
        @change="getData"
      />
    </a-card>
  </a-space>
</template>
<script setup>
import WayForm from './components/WayForm.vue'
import WayTable from './components/WayTable.vue'
import ModalForm from './components/ModalForm.vue'
import { reactive, ref, watch, provide } from 'vue'
import {
  getTransportManagerCountAPI,
  postTransportManagerPageAPI,
} from '@/services/transportManager.js'
const total = ref(0)
const dataSource = ref([])
const isLoading = ref(false)
const data = reactive({
  id: '',
  orderId: '',
  page: 1,
  pageSize: 10,
})
// 获取运单状态 - 按钮组
const truckCount = ref({})
const getTransportManagerCount = async () => {
  const res = await getTransportManagerCountAPI()
  // console.log(res)
  truckCount.value = res.data
}
getTransportManagerCount()
// 监听按钮组状态，切换状态后，重新获取数据
watch(
  () => data.status,
  () => {
    // 重置页码
    data.page = 1
    // 重置页码后，重新获取数据
    getData()
  },
)
// 获取数据
const getData = async () => {
  // 合并参数
  // Object.assign(data, payload)
  // 表格加载状态
  isLoading.value = true
  // 传递参数
  const res = await postTransportManagerPageAPI(data)
  console.log(res)
  // 关闭表格加载状态
  isLoading.value = false
  // 保存列表数据，用于表格展示
  dataSource.value = res.data.items
  // 保存分页总数
  total.value = Number(res.data.counts)
}
getData()
// 是否打开模态框
const isOpenModal = ref(false)
// 依赖注入，方便子组件调用
provide('truckTypes', dataSource)
provide('isLoadingTruckTypes', isLoading)
const onOpenModal = () => {
  isOpenModal.value = true
}
</script>
<style scoped lang="scss">
.radio-card {
  margin: 10px 0;
  // 重置卡片样式
  :deep(.ant-card-body) {
    padding: 0;
  }
  // 重置按钮组样式
  :deep(.ant-radio-button-wrapper) {
    width: 135px;
    font-size: 14px;
    text-align: center;
    border-radius: 0;
    border: 0;
    // 隐藏中间分割线
    &::before {
      display: none;
    }
  }
}
</style>
